<template>
<view class='page-container'>
	<UserInfoCard></UserInfoCard>
	<FilterButton 
		:is-record="isRecord"
		:active-date="activeDate"
		:selected-time-range="selectedTimeRange"
		@update:activeDate="handleChangeFilterBtn"
		@time-range-selected="handleChangeTimeRange"
	></FilterButton>
	<template v-if="invoiceList && invoiceList.length">
		<InfoSheet
			v-for="(sheetData, idx) in transformInvoiceList" 
			:key="idx"
			:sheet-data="sheetData"
		></InfoSheet>
	</template>
	<u-empty v-else text="暂无数据" mode="favor" style="margin-top: 100rpx;"></u-empty>
</view>
</template>

<script>
import UserInfoCard from '../../../components/UserInfo/UserInfoCard.vue'
import FilterButton from '../../../components/FilterButton/FilterButton.vue'
import InfoSheet from '../../../components/InfoSheet/InfoSheet.vue'
export default {
	components: {
		UserInfoCard,
		FilterButton,
		InfoSheet,
	},
	data(){
		return {
			isRecord: true,
			activeDate: '1m',
			selectedTimeRange: '请选择时间范围',
			invoiceList: [
				{
					title: '挂号',
					claerTime: '2025-04-01 10:01:01',
					money: '30'
				},
				{
					title: '门诊',
					claerTime: '2025-07-29 10:01:01',
					money: '80'
				},
				{
					title: '住院',
					claerTime: '2024-08-16 10:01:01',
					money: '1200'
				}
			]
		}
	},
	computed:{
		filteredInvoiceList(){
			// 获取当前时间
			const now = new Date().getTime()

			// 筛选数据
			return this.invoiceList.filter(item => {
				// 解析时间字符串
				const claerTime = new Date(item.claerTime);

				//时间范围筛选
				if (this.selectedTimeRange !== '请选择时间范围') {
					const [startDateStr, endDateStr] = this.selectedTimeRange.split('至');
					const startDate = new Date(startDateStr.trim());
					const endDate = new Date(endDateStr.trim());
					return claerTime >= startDate && claerTime <= endDate;
				}
				// 时间筛选
				switch (this.activeDate) {
					case '1m':
					return this.isWithinMonths(claerTime, now, 1);
					case '6m':
					return this.isWithinMonths(claerTime, now, 6);
					case '1y':
					return this.isWithinMonths(claerTime, now, 12);
					case 'all':
					return true;
					default:
					return true;
				}
			}).sort((a, b) => new Date(b.claerTime) - new Date(a.claerTime)); // 按时间倒序排序
		},
		transformInvoiceList(){
			return this.transformData(this.filteredInvoiceList);
		}
	},
	methods: {
		handleChangeFilterBtn(value) {
			this.activeDate = value;
			this.selectedTimeRange = '请选择时间范围'
		},
		handleChangeTimeRange({ startDate, endDate }) {
			this.selectedTimeRange = `${startDate} 至 ${endDate}`;
			this.activeDate = 'all'
		},
		// 检查日期是否在最近 N 个月内
		isWithinMonths(targetDate, nowDate, months) {
			const pastDate = new Date(nowDate);
			const futureDate = new Date(nowDate);
			pastDate.setMonth(pastDate.getMonth() - months);
			futureDate.setMonth(futureDate.getMonth() + months);
			return targetDate >= pastDate && targetDate <= futureDate;
		},
		// 数据转换方法
		transformData(rawData) {
			return rawData.map(item => ({
				sheetTitle: item.title,
				coverBtn: '查看发票',
				fields: [
					{ label: '结算时间', value: item.claerTime },
					{ label: '金额', value: item.money, vital:true },
				]
			}));
		},
	}

}
</script>

<style lang='scss' scoped>
.page-container {
	background: linear-gradient(#e0f3ff 0%, #fff 50%);
	min-height: 100vh;
	padding: 20rpx;
}
</style>